<template>
  <div class="block-container" :style="{ borderColor: randomColor }">
    <div class="block-title">{{ title }}</div>
    <div class="block-content" v-for="(content, index) in data.content" data-sl="2">
      <div class="block-sub-title">子标题{{ index }}</div>
      <div class="block-content-item">{{ content.a }}</div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, toRefs } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
    
  },
});
const { title, content } = toRefs(props.data);

const randomColor = ref("");

const generateRandomColor = () => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  // 返回RGB格式的颜色字符串
  return `rgb(${r}, ${g}, ${b})`;
};
onMounted(() => {
  randomColor.value = generateRandomColor();
});
</script>
<style scoped>
.block-container {
  width: 100%;
  background-color: #c0c0c0;
  border: 1px solid black;

  .block-title {
    margin-bottom: 10px;
  }

  .block-content {
    padding: 0 20px;

    .block-sub-title {
      position: relative;
      padding-left: 10px;

      &::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 18px;
        left:0;
        top: 4px;
        border-radius: 2px;
        background-color: darkorange;
      }
    }
    .block-content-item {
      padding: 10px;
      border: 1px dashed red;
      margin: 4px 0;
    }
  }
}
</style>
